<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布文章 - 我的个人博客</title>
    <link rel="stylesheet" href="assets/css/normalize.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/publish.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked@4.0.0/marked.min.js"></script>
</head>
<body>
    <header>
        <nav class="main-nav">
            <div class="logo">
                <h1><a href="index.html">我的博客</a></h1>
            </div>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="frontend.html" class="nav-link">技术分享</a>
                    <ul class="submenu">
                        <li><a href="frontend.html">前端开发</a></li>
                        <li><a href="backend.html">后端开发</a></li>
                        <li><a href="tools.html">开发工具</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="travel.html" class="nav-link">生活随笔</a>
                    <ul class="submenu">
                        <li><a href="travel.html">旅行日记</a></li>
                        <li><a href="food.html">美食推荐</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="profile.html" class="nav-link">关于我</a>
                    <ul class="submenu">
                        <li><a href="profile.html">个人简介</a></li>
                        <li><a href="contact.html">联系方式</a></li>
                    </ul>
                </li>
            </ul>
            <div class="nav-actions">
                <button id="theme-toggle" class="theme-toggle">
                    <span class="light-icon">☀️</span>
                    <span class="dark-icon">🌙</span>
                </button>
            </div>
        </nav>
    </header>

    <main>
        <div class="publish-container">
            <h2>发布文章</h2>
            <form id="publish-form" class="publish-form">
                <div class="form-group">
                    <label for="title">文章标题</label>
                    <input type="text" id="title" name="title" required placeholder="请输入文章标题">
                </div>

                <div class="form-group">
                    <label for="category">文章分类</label>
                    <select id="category" name="category" required>
                        <option value="">请选��分类</option>
                        <option value="前端开发">前端开发</option>
                        <option value="后端开发">后端开发</option>
                        <option value="开发工具">开发工具</option>
                        <option value="旅行日记">旅行日记</option>
                        <option value="美食推荐">美食推荐</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="cover-image">封面图片</label>
                    <input type="file" id="cover-image" name="cover-image" accept="image/*">
                    <img id="image-preview" style="display: none; max-width: 100%; margin-top: 1rem;">
                </div>

                <div class="form-group">
                    <label for="tag-input">文章标签</label>
                    <div class="tag-input-container">
                        <input type="text" id="tag-input" placeholder="输入标签后按回车或逗号添加">
                        <div id="tag-list" class="tag-list"></div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="content">文章内容</label>
                    <textarea id="content" name="content" required></textarea>
                </div>

                <div class="preview-section">
                    <h3>预览</h3>
                    <div id="preview-content" class="preview-content"></div>
                </div>

                <div class="form-actions">
                    <button type="submit" class="publish-btn">发布文章</button>
                </div>
            </form>
        </div>
    </main>

    <footer>
        <p>&copy; 2024 我的个人博客. All rights reserved.</p>
    </footer>

    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/publish.js"></script>
</body>
</html> 